<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        html {
            height: 100%;
        }

        body {
            background-color: #ffffff;
            margin: 0px;
            height: 100%;
            color: #555;
            font-family: 'inconsolata';
            font-size: 15px;
            line-height: 18px;
            overflow: hidden;
        }

        h1 {
            margin-top: 30px;
            margin-bottom: 40px;
            margin-left: 20px;
            font-size: 25px;
            font-weight: normal;
        }

        h2 {
            font-size: 20px;
            font-weight: normal;
        }

        h3 {
            font-size: 15px;
            font-weight: normal;
        }

        a {
            color: #2194CE;
            text-decoration: none;
        }

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        #tab {
            position: fixed;
            left: 0px;
            width: 450px;
            height: 100%;
            overflow: auto;
            background: #fafafa;
            border: 1px solid #ddd;
            box-shadow: 0 0 2px #ddd;
        }

        #tab-content #content {
            padding: 0px 20px 20px 20px;
        }

        #tab-content #content .link {
            color: #2194CE;
            text-decoration: none;
            cursor: pointer;
            display: block;
        }

        #tab-content #content .selected {
            color: #ff0000;
        }

        #tab-content #content .link:hover {
            text-decoration: underline;
        }

        #tab-content #exercise {
            padding: 0px 20px 20px 20px;
        }

        #tab-content #exercise .link {
            color: #2194CE;
            text-decoration: none;
            cursor: pointer;
            display: block;
        }

        #tab-content #exercise .selected {
            color: #ff0000;
        }

        #tab-content #exercise .link:hover {
            text-decoration: underline;
        }

        /*选项卡的头部*/
        #tab-header {
            background-color: #F7F7F7;
            height: 33px;
            text-align: center;
            position: relative;
        }

        #tab-header ul {
            width: 450px;
            position: absolute;
            left: -1px;
        }

        #tab-header ul li {
            float: left;
            width: 98px;
            height: 33px;
            line-height: 33px;
            padding: 0 1px;
            /* border-bottom: 1px solid #dddddd; */
        }

        #tab-header ul li.selected {
            background-color: white;
            font-weight: bolder;
            border-bottom: 0;
            /* border-left: 1px solid #dddddd;
            border-right: 1px solid #dddddd; */
            padding: 0;

        }

        #tab-header ul li:hover {
            color: orangered;
            cursor: pointer;
        }

        /*主要内容*/
        #tab-content .dom {
            display: none;
        }

        #tab-content .dom ul li {
            float: left;
            /*background-color: red;*/
            margin: 15px 10px;
            width: 225px;
        }

        #viewer {
            position: absolute;
            border: 0px;
            left: 450px;
            width: calc(100% - 450px);
            height: 100%;
            overflow: auto;
        }

        #tab-content .dom ul li a:hover {
            color: orange;
        }
    </style>
</head>

<body>
    <!--选项卡-->
    <div id="tab">
        <!--选项的头部-->
        <div id="tab-header">
            <ul>
                <li class="selected">example</li>
                <li>exercise</li>
                <!--<li>技术</li>-->
            </ul>
        </div>
        <!--主要内容-->
        <div id="tab-content">
            <div class="dom" id="content" style="display: block;">
            </div>
            <div class="dom" id="exercise">
            </div>
        </div>
    </div>
    <iframe id="viewer" name="viewer" allowfullscreen allowvr onmousewheel=""></iframe>
    <script src="files.js"></script>
    <script>
        function $(id) {
            return typeof id === 'string' ? document.getElementById(id) : id;
        }

        // 当页面加载完毕
        window.onload = function () {
            // 拿到所有的标题(li标签) 和 标题对应的内容(div)
            var titles = $('tab-header').getElementsByTagName('li');
            var divs = $('tab-content').getElementsByClassName('dom');
            // 判断
            if (titles.length != divs.length) return;
            // 遍历
            for (var i = 0; i < titles.length; i++) {
                // 取出li标签
                var li = titles[i];
                li.id = i;
                //        console.log(li);
                // 监听鼠标的移动
                li.onclick = function () {
                    for (var j = 0; j < titles.length; j++) {
                        titles[j].className = '';
                        divs[j].style.display = 'none';
                    }
                    this.className = 'selected';
                    divs[this.id].style.display = 'block';
                }
            }
        }

        // let panel = document.getElementById('content');
        let content = document.getElementById('content');
        let exeContent = document.getElementById('exercise');
        let viewer = document.getElementById('viewer');

        let container = document.createElement('div');
        let exeContainer = document.createElement('div');
        content.appendChild(container);
        exeContent.appendChild(exeContainer);

        let links = {};
        let selected = null;

        function createLink(file) {

            let link = document.createElement('a');
            link.className = 'link';
            link.href = file + '.html';
            link.textContent = file.substring(file.indexOf('-') + 1);
            link.setAttribute('target', 'viewer');
            link.addEventListener('click', function (event) {

                if (event.button != 0 || event.ctrlKey || event.altKey || event.metaKey) return;

                selectFile(file);

            });

            return link;
        }

        createFileList(files, container, 'h2', '');
        createFileList(exercises, exeContainer, 'h2', 'Exercise');
        function createFileList(filesList, container, headTag, subkey) {

            for (let key in filesList) {

                let section = filesList[key];

                let header = document.createElement(headTag);
                header.textContent = key;
                header.setAttribute('data-category', key);
                container.appendChild(header);

                if (section instanceof Array) {
                    for (let i = 0; i < section.length; i++) {

                        let file = subkey + '\\' + key + '\\' + section[i];

                        let link = createLink(file);
                        container.appendChild(link);

                        links[file] = link;
                    }
                }
                else if (section instanceof Object) {
                    createFileList(section, container, 'h3', key);
                }
            }
        }

        function loadFile(file) {
            selectFile(file);
            viewer.src = file + '.html';
        }

        function selectFile(file) {
            if (selected !== null) {
                links[selected].classList.remove('selected');
            }

            links[file].classList.add('selected');

            window.location.hash = file;

            viewer.focus();

            // panel.classList.add('collapsed');

            selected = file;
        }

        if (window.location.hash !== '') {

            loadFile(window.location.hash.substring(1).replace(/%20/g, ' '));

        }
    </script>
</body>

</html>